<template>
  <!-- 商品信息 -->
  <div>
    <div class="title titone">商品概览</div>
    <div class="box" v-if="hasRoot">
      <div class="overview">
        <div class="viewbox">
          <div>
            <span>{{ format_num(summary.goods_count) }}</span>商品数
          </div>
          <div>
            <span>{{ format_num(summary.goods_volume) }}</span>总预估销量
          </div>
          <div>
            <span>{{ format_num(summary.goods_amount) }}</span>总预估销售额
          </div>
        </div>
        <div class="tld_time">
          <RadioGroup v-model="lookTime" :radio_values="['近7天', '30天', '90天']" />
        </div>
      </div>
      <!-- 商品销售趋势 -->
      <div class="trendchart">
        <div class="title">商品销售趋势</div>
        <div class="chartbox">
          <KChart
            v-if="chart_x.length && chart_x && !loading"
            :xData="chart_x"
            :series1="chart_y"
            name1="销量"
          />
          <van-loading
            style="margin:2rem 0rem"
            class="loading"
            v-if="loading"
            type="spinner"
            :vertical="true"
          />
        </div>
      </div>
      <!-- 商品信息 -->
      <div class="goodsnews">
        <div class="title">商品信息</div>
        <div class="goodbox" v-for="(item, i) in salepro" :key="i + 'a'">
          <div class="gb_tit">
            <img :src="item.proLogo" @click="todatails(item.proId)" />
            <div>
              <div class="tit_good" @click="todatails(item.proId)">{{ item.proTitle }}</div>
              <div class="video" @click="gotovideo(item.proId)">关联视频</div>
            </div>
          </div>
          <div class="good_num">
            <div>
              <span>￥{{ format_num(item.proPrice) }}</span>商品价格
            </div>
            <div>
              <span>{{ format_num(item.volume) }}</span>预估销量
            </div>
            <div>
              <span>{{ format_num(item.amount) }}</span>预估销售额
            </div>
          </div>
        </div>
        <!-- 查看更多 -->
        <van-loading class="loading" v-if="loading01" type="spinner" :vertical="true" />
        <div class="more" v-show="salepro.length > 10 && !loading01" @click="lookMore">查看更多</div>
        <p class="tld_details" v-if="salepro.length">我是有底线的~</p>
        <!-- 暂无数据 -->
        <div class="zanwu" v-if="!salepro.length && !loading">
          <img src="@/assets/three/noData.png" />
          <p>暂无数据</p>
        </div>
      </div>
    </div>
    <noPower :minLeve="$store.state.userRoot[7][170].ownerMinLevel" v-else />
    <!-- 分割线 -->
    <div class="line"></div>
  </div>
</template>
<script>
import RadioGroup from '../../component/RadioGroup.vue';
import KChart from '../../component/KChart.vue';
export default {
  components: { RadioGroup, KChart },
  data() {
    return {
      lookTime: '30天',
      salepro: [], //商品列表
      summary: [], //商品概览
      chart_x: [], //商品销量趋势x轴
      chart_y: [], //y轴
      proVolume: [], //销量
      loading: false,
      loading01: false,
      isLastPage: false,
      endDate: '',
      startDate: '',
      hasRoot: true
    };
  },
  watch: {
    lookTime: function (newVal, oldVal) {
      this.changeTime();
    }
  },
  created() {
    this.changeTime();
    this.sale();
    this.getSalepro();
  },
  methods: {
    // 列表查看更多事件
    lookMore() {
      this.page++;
      this.getSalepro();
    },
    changeTime() {
      this.salepro = [];
      this.salepro = [];
      this.summary = [];
      this.chart_x = [];
      this.chart_y = [];
      switch (this.lookTime) {
        case '近7天':
          this.endDate = this.timestamp((Date.now() / 1000) * 1, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 6, 'Y-M-D');
          break;
        case '30天':
          this.endDate = this.timestamp((Date.now() / 1000) * 1, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 29, 'Y-M-D');

          break;
        case '90天':
          this.endDate = this.timestamp((Date.now() / 1000) * 1, 'Y-M-D');
          this.startDate = this.timestamp(Date.now() / 1000 - 86400 * 89, 'Y-M-D');
          break;
      }
      // 切换时间段需要调取的接口
      this.sale();
      this.getSalepro();
    },
    // 获取视频销量
    sale() {
      this.loading = true;
      this.$axios
        .get(
          `api/aweme/sale?awemeid=${this.$route.query.id}&api-version=2&stime=${this.startDate}&etime=${this.endDate}`
        )
        .then(result => {
          if (result.data.code == 0) {
            this.loading = false;
            this.summary = result.data.data.summary;
            this.chart_x = result.data.data.chart.ctime.map(item => {
              return this.timestamp(item, 'M-D');
            });
            this.chart_y = result.data.data.chart.volume;
            this.proVolume = result.data.data.chart.proVolume;
          }
          if (result.data.code == 1003) {
            this.hasRoot = false;
          }
        })
        .catch(err => {});
    },
    // 获取视频商品列表
    getSalepro() {
      this.loading01 = true;
      this.isLastPage = false; //列表是否到底
      this.$axios
        .get(
          `/api/aweme/salepro?awemeid=${this.$route.query.id}&api-version=2&stime=${this.startDate}&etime=${this.endDate}`
        )
        .then(result => {
          if (result.data.code == 0) {
            this.salepro = result.data.data;
            this.loading01 = false;
          } else {
            this.loading01 = false;
          }
          if (result.data.code == 1003) {
            this.hasRoot = false;
          }
        })
        .catch(err => {});
    },
    // 跳转 关联视频
    gotovideo(id) {
      this.$router.push({
        path: '/videopage',
        query: { id, startDate: this.startDate, endDate: this.endDate }
      });
    },
    //跳转商品详情
    todatails(id) {
      this.$router.push({ path: '/goodsDetailsMain', query: { id: id } });
    }
  }
};
</script>
<style lang="less" scoped>
.tld_details {
  font-size: 0.32rem;
  color: #b5b5b5;
  margin-top: 0.4rem;
  text-align: center;
}
.box {
  width: 9.2rem;
  margin: 0.6933rem auto 0.5rem auto;
}
// 标题
.title {
  position: relative;
  font-size: 0.4rem;
  color: #222;
  font-weight: 600;
  padding-left: 0.2rem;
}
.titone {
  margin: 0.6933rem 0.4rem 0;
}
.title::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 0.08rem;
  height: 0.3733rem;
  background-color: #fd7f2c;
  border-radius: 0.1333rem;
}
// 数据概况
.viewbox {
  display: flex;
  justify-content: space-around;
  padding-top: 0.906667rem;
  span {
    display: block;
    font-size: 0.453333rem;
    color: #222;
    font-family: Dinpro-medium;
  }
  div {
    font-size: 0.32rem;
    color: #888;
    text-align: center;
    padding-top: 0.266667rem;
    padding-bottom: 0.666667rem;
  }
}
//
.overview {
  position: relative;
  .tld_time {
    position: absolute;
    right: 0;
    top: 0;
  }
}
// 销量趋势图
.chartbox {
  width: 9.2rem;
  height: 6rem;
}
// 商品信息
.goodbox {
  padding-top: 0.4rem;
  .gb_tit {
    display: flex;
    margin-bottom: 0.4rem;
    img {
      display: block;
      width: 1.333333rem;
      height: 1.333333rem;
      border-radius: 0.266667rem;
      margin-right: 0.266667rem;
      object-fit: cover;
    }
    div {
      width: 7.6rem;
      .tit_good {
        font-size: 0.266667rem;
        color: #222;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        padding: 0.08rem 0 0.16rem 0;
      }
      .video {
        width: 1.733333rem;
        line-height: 0.586667rem;
        background-color: #ffffff;
        border-radius: 0.1rem;
        border: solid 1px #fd7f2c;
        font-size: 0.32rem;
        color: #fd7f2c;
        text-align: center;
      }
    }
  }
  .good_num {
    // 商品价格
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid #e5e5e5;
    div {
      span {
        display: block;
        font-family: DINPro-Medium;
        font-size: 0.4rem;
        color: #222;
      }
      font-size: 0.32rem;
      color: #888;
      text-align: center;
      padding-bottom: 0.4rem;
    }
  }
}
//   查看更多
.more {
  margin: 0.6667rem auto 0 auto;
  width: 2.1333rem;
  height: 0.8rem;
  line-height: 0.8rem;
  border-radius: 0.1333rem;
  border: solid 1px #fd7f2c;
  font-size: 0.3467rem;
  color: #fd7f2c;
  text-align: center;
}
//   暂无数据
.zanwu {
  width: 5.3333rem;
  height: 4rem;
  margin: 1rem auto 0 auto;
  img {
    margin: 0 auto;
    width: 4rem;
    height: 3.2rem;
    display: block;
  }
  p {
    font-size: 0.3467rem;
    line-height: 0.4rem;
    color: #888;
    text-align: center;
  }
}
// 分割线
.line {
  width: 100%;
  height: 0.1866rem;
  background: #f1f1f1;
}
</style>
